<template>
    <el-main>
        <el-card class="info">
            <el-table :data="history.data" style="width: 100%" :default-expand-all="true" stripe>
                <el-table-column fixed type="index" label="#" />
                <el-table-column prop="user.nickname" label="姓名" width="120" sortable />
                <el-table-column prop="user.phone" label="手机号" width="150" sortable />
                <el-table-column prop="user.company" label="单位" sortable />
                <el-table-column prop="score" label="得分" width="120" sortable />
                <el-table-column prop="speed" label="答题时间" width="120" sortable />
                <el-table-column label="提交时间" width="180">
                    <template #default="scope">
                        {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="unPublish(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-pagination v-model:current-page="params.page" v-model:page-size="params.limit"
            :page-sizes="[10, 50, 100, 200]" background layout="total, sizes, prev, pager, next, jumper"
            :total="history.count" />
    </el-main>
</template>

<script setup>
const route = useRoute()
const dayjs = useDayjs()
const params = reactive({
    topicId: route.params.id,
    page: 1,
    limit: 10,
})
const { data: history, refresh } = await useFetch(`/api/historylist`, { params: params })
const unPublish = async (id) => {
    ElMessageBox.confirm(
        '请确认是否删除?',
        '删除确认',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error',
        }
    ).then(async () => {
        await useFetch(`/api/history`, { method: 'delete', params: { postId: id } })
        refresh()
        ElMessage.success('删除成功!')
    }).catch(() => {
        ElMessage.error('取消操作!')
    })
}
</script>

<style scoped>
.info {
    margin-bottom: 30px;
}

img {
    max-width: 100%;
}
</style>
